<template>
  <a-modal
    :title="modalTitle"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item label="业务ID" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="false">
          <a-input v-if="modalOpera==1" v-decorator="['id', {rules: [{required: true}]}]" />
        </a-form-item>

        <a-form-item label="父ID" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="false">
          <a-input v-decorator="['parentId', {rules: [{required: true}],initialValue:'0'}]" />
        </a-form-item>

        <a-form-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="false">
          <a-input v-decorator="['apiType', {rules: [{required: false, message: '请输入！'}]}]" />
        </a-form-item>

        <a-form-item label="微服务实例" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择微服务"
            v-decorator="[
              'apiModule',
              {rules: [{ required: true, message: '请选择微服务'}]}
            ]">
            <a-select-option v-for="(app, index) in apps" :key="index" :value="app.value">{{ app.name }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :label="title+'名称'" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-input v-decorator="['apiName', {rules: [{required: true, min: 3, message: '请输入至少三个字符的规则！'}]}]" />
        </a-form-item>

        <a-form-item :label="title+'地址'" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="record">
          <a-input v-decorator="['apiUrl', {rules: [{required: true, min: 3, message: '请输入至少三个字符的规则！'}]}]" />
        </a-form-item>

        <a-form-item :label="title+'标识'" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="record">
          <a-input v-decorator="['apiPerm', {rules: [{required: true, min: 3, message: '请输入至少三个字符的规则！'}]}]" />
        </a-form-item>

        <a-form-item
          label="顺序"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input-number
            style="width: 100%;"
            :min="1"
            :max="1000"
            v-decorator="['apiOrderNum',{rules: [{required: true, message: '请输入顺序'}],initialValue:1}]" />
        </a-form-item>

        <a-form-item :label="title+'描述'" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea v-decorator="['apiDesc', {rules: [{required: false, min: 3, message: '请输入至少三个字符的规则！'}]}]" />
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { save, getById, update } from '@/api/system/clientapi'
import pick from 'lodash.pick'
  import { loadApp } from '@/api/system/menu'
export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
     modalTitle: '',
     title: '',
     modalOpera: 0, // 0：新增 1：编辑
     record: null,
     visible: false,
     confirmLoading: false,
     apps: [],
     form: this.$form.createForm(this)
    }
  },
	created () {
    this.listApps()
	},
  methods: {
    add (record) {
      this.record = record
        if (record) {
           this.setVal(record.id, 1, record.attributes.apiModule)
        } else {
           this.setVal('0', 0, '')
        }
        const title = ((!record) ? '服务' : '接口')
        this.title = title
        this.modal('新建' + title, 0)
    },
    setVal (parentId, type, apiModule) {
      const that = this
      setTimeout(() => {
        that.form.setFieldsValue({ parentId: parentId })
        that.form.setFieldsValue({ apiType: type })
        that.form.setFieldsValue({ apiModule: apiModule })
      }, 100)
    },
		edit (record) {
        if (record.attributes.type === 0) {
            this.record = null
        } else {
            this.record = record
        }
		    this.modal('编辑接口', 1)
			  getById({ id: record.id }).then(response => {
				this.form.setFieldsValue(pick(response.res, 'id', 'parentId', 'apiType', 'apiName', 'apiUrl', 'apiPerm', 'apiDesc', 'apiModule', 'apiOrderNum'))
			})
    },
    changeService (value, options) {
       const that = this
       let apiModuleName = ''
       if (this.services.length > 0) {
         this.services.forEach(function (item, index) {
           console.log(item)
            if (item.value === value) {
              apiModuleName = item.name
            }
         })
       }
      that.form.setFieldsValue({ 'apiName': apiModuleName })
    },
    listApps () {
      loadApp({ type: 'server_name' }).then(response => {
        if (response.code === 0) {
          this.apps = response.res
        }
      })
    },
		modal (title, opera) {
			this.modalTitle = title
			this.modalOpera = opera
			this.visible = true
			this.form.resetFields()
		},
        handleSubmit () {
          const { form: { validateFields } } = this
          this.confirmLoading = true
          validateFields((errors, values) => {
            if (!errors) {
                  if (this.modalOpera === 0) {
                         save(values).then(response => {
                             this.$message.info(response.msg)
                             this.$emit('ok')
                             this.handleCancel()
                         })
                    } else if (this.modalOpera === 1) {
                         update(values).then(response => {
                         this.$message.info(response.msg)
                         this.$emit('ok')
                         this.handleCancel()
                        })
                    }
            } else {
              console.log(errors)
            }
            this.confirmLoading = false
          })
        },
        handleCancel () {
            this.visible = false
            this.confirmLoading = false
        }
  }
}
</script>
